<template>
  <view class="dialog-mask-comp" @click="$emit('click')">
    <view class="dialog-wrapper">
      <view class="dialog-bg" 
        :style="{
          backgroundImage: `url(${staticImgs.dialogBg})`
        }"
      >
        <view class="dialog-text">
          <slot name="content"></slot>
        </view>
      </view>
      <view class="btn-group">
        <slot name="btn1"></slot>
        <slot name="btn2"></slot>
        <slot name="btn3"></slot>
        <slot name="btn4"></slot>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
     // btnOpts:{
     //   type: Object,
     //   default:()=>({})
     // },
     
    },
    computed: {
    },
    data(){
      return {
        staticImgs:{
          dialogBg: this.imgBaseURL + '/scl/checkup-mental/dialog-bg-new.png',
        },
        btnType:1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-mask-comp{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    // height: 1279rpx;
    height: 76vh;
    background: linear-gradient( 180deg, rgba(127,128,127,0) 0%, rgba(44,97,125,1) 100%);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    .dialog-wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-bottom: 180rpx;
    }
    
    
    .dialog-bg{
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 668rpx;
      height: 440rpx;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding-bottom: 24rpx;
      justify-content: center;
      
      .dialog-text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 45rpx;
        text-align: justify;
        font-style: normal;
        
        width: 610rpx;
        height: 180rpx;
        // margin: auto;
      }
      
    }
    
    .btn-group{
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 54rpx;
      margin-top: 50rpx;
      
      .btn-base{
        width: 270rpx;
        height: 70rpx;
        border-radius: 45rpx;
        
        font-family: PingFang-SC, PingFang-SC;
        // font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 70rpx;
        text-align: center;
        font-style: normal;
      }
      
      .btn-female{
        background: #FCA5C5;
      }
      
      .btn-normal{
        background: #5ED5FF;
      }
    }
  }
</style>